<template>
  <div>
    <el-card style="max-width: 1000px; margin: 0 auto;">
      <div class="box-2">
        <h4>● 指派记录</h4>
        <el-card>
          <el-row>
            <el-col v-for="(item, index) in info.assign_log" :key="index" :xs="12" :sm="8" :md="7" :lg="6" :xl="4">
              <h1>{{ item.name }}<span>{{ index===(info.assign_log.length-1) ? "(上传者)" : '' }}</span></h1>
              <span>{{ item.contact_time }}</span>
            </el-col>
          </el-row>
        </el-card>
        <div style="height: 36px;"/>
      </div>
      <div class="box-1">
        <div class="flex-row flex-between">
          <h4>客户信息</h4>
          <el-button type="text" @click="toModify">详细></el-button>
        </div>
        <div class="flex-row">
          <div class="flex-1">
            <div>
              <span class="text-157a">客户昵称：</span>
              <span class="text-1543 margin-l-10">{{ info.name }}</span>
            </div>
            <div>
              <span>联系电话：</span>
              <span>{{ info.mobile }}</span>
            </div>
            <div>
              <span>联系微信：</span>
              <span>{{ info.wechat }}</span>
            </div>
            <div>
              <span>公司名称：</span>
              <span>{{ info.company }}</span>
            </div>
          </div>
          <div class="flex-1">
            <div>
              <span class="text-157a">真实姓名：</span>
              <span class="text-1543 margin-l-10">{{ info.realname }}</span>
            </div>
            <div>
              <span>腾讯云ID：</span>
              <span>{{ info.qq }}</span>
            </div>
            <div>
              <span>联系QQ：</span>
              <span>{{ info.tencent_id }}</span>
            </div>
            <div>
              <span>职位：</span>
              <span>{{ info.position }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box-2">
        <h4>● 客户来源</h4>
        <div style="padding: 0 20px 20px 20px;">
          <p v-for="(item, index) in info['source_list']" :key="index">{{ index===0 ? '初始来源' : '重复来源' }}：{{ item }}</p>
        </div>
      </div>
      <div class="box-2">
        <h4>● 沟通记录</h4>
        <div style="margin-bottom: 15px;color:#1EC2A0; ">下次联系时间：{{ info.contact_next_time }}</div>
        <el-card v-if="!info.contact_record||info.contact_record.length===0">
          <div>空空如也~</div>
        </el-card>
        <div v-for="(item, index) in info.contact_record" :key="index" class="timeline">
          <el-row class="content">
            <el-card>
              <div slot="header" class="header">
                <span>{{ item.adminname }}</span>
                <div class="text-right" style="color: #b7b7b7;">{{ item.comm_time }}</div>
              </div>
              <div class="body" v-html="item.contentlog">{{ item.contentlog }}</div>
            </el-card>
          </el-row>
        </div>
        <div style="height: 36px;"/>
      </div>
      <div class="box-1">
        <h4>添加新记录</h4>
        <span class="tag-box">
          <el-tag type="info" style="margin-left: 20px">我的分组</el-tag>
          <el-tag
            v-for="(tag, tagIdx) in groupList"
            :key="tagIdx"
            :effect="info.group_id===tag.id?'dark':''"
            style="cursor: pointer;"
            @click="info.group_id=tag.id">{{ tag.name }}
          </el-tag>
          <el-input v-if="inputVisible" ref="saveTagInput" v-model="inputValue" class="input-new-tag" size="small"
                    @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"/>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新分组</el-button>
        </span>
        <div class="radio">
          <div>客户跟进状态：</div>
          <el-radio-group v-model="info.progress">
            <el-radio v-for="item in progressList" :key="item" :label="item">{{ item }}</el-radio>
          </el-radio-group>
        </div>
        <!--<div>
          <div>沟通时间：</div>
          <el-date-picker v-model="info.contact_time" value-format="yyyy-MM-dd" type="datetime" placeholder="选择日期时间" default-time="00:00:00"/>
        </div>-->
        <div>
          <div>下次联系：</div>
          <el-date-picker v-model="info.next_contact_time" :picker-options="datePickerOptions" type="datetime"
                          placeholder="选择日期时间" align="right"/>
          <div class="remark">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*注:请选择10年以内日期</div>
        </div>
        <div>
          <div>沟通内容：</div>
          <el-input v-model="info.content" :placeholder="info.char_length?`请至少输入${info.char_length}个字符~`:'请输入沟通内容'"
                    type="textarea" rows="4" maxlength="300" show-word-limit/>
        </div>
        <div>
          <el-button type="success" class="bg-green submit-btn" @click="submit">确 定</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {parseTime} from '@/utils/table'

  export default {
    data() {
      return {
        datePickerOptions: {
          shortcuts: [{
            text: '1天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '3天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 3)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }, {
            text: '两周',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 14)
              picker.$emit('pick', date)
            }
          }, {
            text: '一个月',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit('pick', date)
            }
          }, {
            text: '三个月',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 90)
              picker.$emit('pick', date)
            }
          }]
        },

        groupList: [],
        inputVisible: false,
        inputValue: '',

        progressList: ['初步沟通', '需求分析', '展示引导', '方案报价', '协商议价', '成单签约', '丢单'],
        info: {
          group_id: '',
          progress: '',
          contact_time: '',
          next_contact_time: ''
        }
      }
    },
    watch: {},
    created() {
      this.title = this.$route.query.title
      this.id = this.$route.query.id
      this.getCustomerInfo(this.$route.query.id)
      this.getPersonalGroupList();
    },
    methods: {
      parseTime,
      /**
       *  获取客户信息
       *  接口:'customer/detail/{id}'
       */
      getCustomerInfo(id) {
        const url = 'customer/detail/' + id
        this.$store.dispatch('GetConnect', {url}).then(res => {
          Object.assign(this.info, res.data)
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },

      toModify() {
        const query = { title: '客户详情', id: this.info.id }
        this.$router.push({
          path: '/customer/mine/modify',
          query: query
        })
      },

      /**
       *  获取个人分组列表
       *  接口:'user/all-list'
       */
      getPersonalGroupList() {
        const url = 'customer/getGroupList'
        this.$store.dispatch('GetConnect', {url}).then(res => {
          this.groupList = res.data
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      // 添加分组
      handleInputConfirm() {
        const inputValue = this.inputValue;
        if (inputValue) {
          const url = 'customer/getAddGroup'
          const data = {name: inputValue};
          this.$store.dispatch('GetConnect', {url, data}).then(res => {
            this.getPersonalGroupList();
          }).catch(e => {
            this.$message.error(e.msg + ',请刷新或联系管理员')
          })
        }
        this.inputVisible = false;
        this.inputValue = '';
      },

      /**
       * 添加沟通记录
       * customer/ajax/{id}
       */
      submit() {
        // if (!this.info.contact_time || this.info.contact_time === '' || this.info.contact_time === null || !this.info.next_contact_time || this.info.next_contact_time === '' || this.info.next_contact_time === null) {
        //   this.$message.error('检查时间是否选择')
        // }
        if (!this.info.next_contact_time || this.info.next_contact_time === '' || this.info.next_contact_time === null) {
          this.$message.error('检查时间是否选择')
        } else {
          const data = {
            action: 'submit_log',
            progress: this.info.progress,
            contact_time: this.parseTime(new Date()),
            next_contact_time: this.parseTime(this.info.next_contact_time),
            content: this.info.content,
            group_id: this.info.group_id
          }
          const url = 'customer/ajax/' + this.info.id
          this.$store.dispatch('GetConnect', {url, data}).then(res => {
            this.$message.success('沟通记录添加成功')
            // this.getCustomerInfo(this.info.id)
            this.$router.back(-1)
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        }
      },
      cancel() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';

  .box-1 {
    > div {
      @extend .flex-row;
      align-items: stretch;
      flex-wrap: wrap;
      padding: 10px 20px;

      .el-textarea {
        flex: 1;
      }

      .submit-btn {
        width: 200px;
        margin: 0 auto;
      }

      > div {
        line-height: 40px;
      }
    }

    .radio {
      padding: 0 20px;
      padding-bottom: 15px;
      line-height: 50px;

      .el-radio-group {
        line-height: 50px;
      }
    }
  }

  .box-2 {
    padding-right: 20px;

    > .el-card {
      .el-row {
        .el-col {
          text-align: center;

          h1 {
            font-size: 18px;
          }

          span {
            font-size: 14px;
            color: $textGray;
          }
        }
      }
    }

    > span {
      font-size: 20px;
      line-height: 60px;
      color: $text7a;
      font-weight: 700;
    }

    .timeline {
      position: relative;

      .content {
        padding-bottom: 20px;

        .header {
          @include flex-row(center, space-between);
        }

        .body {
          line-height: 26px;
          color: $textGray;
        }
      }
    }
  }

  .el-checkbox {
    margin-right: 30px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }

  .remark {
    font-size: 13px;
    color: $textGray;
  }
</style>
